<template>
    <div class="kzjwcgzl">
        <div class="kzjwcgzl-top">
            <el-form :model="form" ref="form" label-width="80px" :inline="true" size="normal">
                <el-form-item label="行政区划">
                    <el-cascader v-model="form.addvcd" :options="xzqhdata" :props="xzqhprop" ref="xzqh"
                        @change="xzqhorgChange" :clearable="true"></el-cascader>
                </el-form-item>
                <span class="ccq">
                    <el-form-item label="超采区">
                        <el-select v-model="form.odcd" placeholder="请选择超采区" @change="ccqchange">
                            <el-option v-for="item in ccq" :key="item.odnm" :label="item.odcd" :value="item.odcd">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </span>
            </el-form>
            <div class="top-button">
                <el-button type="primary" size="default" @click="chaxun"><i class="iconfont icon-sousuo"></i> 查
                    询</el-button>
                <el-button type="primary" size="default" @click="chongzhi"><i class="el-icon-refresh"></i> 重
                    置</el-button>
                <el-button type="primary" size="default" @click="daochu"><i class="el-icon-upload2"></i> 导 出</el-button>
            </div>
        </div>
        <div class="kzjwcgzl-middle">
            <el-table class="tableBox" :data="tableData" border stripe height="90%" :row-class-name="tableRowClassName"
                :header-cell-style="{ background: '#b2dffe', color: '#000' }" style="width: 100%">
                <el-table-column type="index" align="center" label="序号" width="55" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div v-text="pagesize * (currentPage - 1) + 1 + scope.$index"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="odcd" label="超采区" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="addvnm" label="行政区划" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="percent" label="校核工作完成百分比(%)" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="count" label="空值数量统计" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <a href="#" @click="kzsldhkxs(scope.row)">{{ scope.row.count }}</a>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <i class="iconfont icon-chakan" title="查看" @click="chakandhk(scope.row)"></i>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage" :page-size="pagesize" layout="total, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 空值数量对话框 -->
        <el-dialog class="kzsldhk" :visible.sync="dialogVisible" width="80%" :append-to-body="true">
            <div slot="title" class="dialog-title">
                <div class="button-right">
                    <span>{{ this.kzsldhktitle }}空值监测站信息统计</span>
                    <!-- <i class="el-icon-circle-close"></i>; -->
                </div>
            </div>
            <div class="center">
                <el-table class="tableBox" :data="tableData1" :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#b2dffe', color: '#000' }" stripe border style="width:100%">
                    <el-table-column prop="jbxx" label="基本信息" width="180">
                        <el-table-column prop="odcd" label="超采区" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="count" label="空值数量" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <el-table class="tableBox" :data="tableData2" stripe height="235" :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#b2dffe', color: '#000' }" border style="width: 100%">
                    <el-table-column prop="date" width="180">
                        <template slot="header">
                            {{ this.kzsldhktitle }}空值监测站信息统计表
                        </template>
                        <el-table-column type="selection" align="center" width="50">
                        </el-table-column>
                        <el-table-column label="序号" type="index" width="55" align="center">
                        </el-table-column>
                        <el-table-column prop="stcd" label="测站编码" width="140" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column prop="stnm" label="测站名称" width="180" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column prop="odcd" label="超采区" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column prop="addvnm" label="行政区划" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column prop="tm" label="监测时间" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="sldhkdc"><i class="iconfont icon-xiazai-" title="下载"></i>&nbsp;下 载
                </el-button>
            </span>
        </el-dialog>
        <!-- 查看对话框 -->
        <el-dialog class="kzsldhk" :visible.sync="ckdialogVisible" width="80%" :append-to-body="true">
            <div slot="title" class="dialog-title">
                <div class="button-right">
                    <span>{{ this.ckdhktitle }}完成工作量统计</span>
                    <!-- <i class="el-icon-circle-close"></i>; -->
                </div>
            </div>
            <div class="center">
                <el-table class="tableBox" :data="chakanData1" :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#b2dffe', color: '#000' }" stripe border style="width:100%">
                    <el-table-column prop="jbxx" label="基本信息" width="180">
                        <el-table-column prop="addvnm" label="行政区划" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column prop="odcd" label="超采区" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column prop="percent" label="校核工作完成百分比(%)" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <el-table class="tableBox" :data="chakanData2" stripe height="235" :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#b2dffe', color: '#000' }" border style="width: 100%">
                    <el-table-column prop="date" width="180">
                        <template slot="header">
                            {{ this.ckdhktitle }}完成监测站信息统计表
                        </template>
                        <el-table-column label="序号" type="index" align="center" width="55">
                        </el-table-column>
                        <el-table-column prop="stcd" label="测站编码" width="140" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column prop="stnm" label="测站名称" width="140" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column prop="addvnm" label="行政区划" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column prop="odcd" label="超采区" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column prop="percent" label="校核工作完成百分比(%)" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>
<script>
// 列表、行政区划、数量对话框列表、查看对话框列表
import { ccqkztjlist, xzqhlist, ccqkztjkzsldhklist, sjtqccqdymc, ccqkztjckdhklist, ccqkztjlistdc, ccqkztjsldhkdc } from '@/api/index'
import exprotFile from "@/utils/exportFile"
import dayjs from 'dayjs'
export default {
    data() {
        return {
            form: {
                addvcd: '220000',//行政区划
                odcd: '',//超采区
                yr: '',//去年
                quarter: '',//季度
                yr1: '',//今年
            },
            tableData: [],//表格数据
            ccq: [],//超采区
            // 底部页码
            pagesize: 10,
            currentPage: 1,
            total: 10,
            xzqhdata: [],//行政区划
            xzqhprop: {
                label: "addvnm",
                value: "addvcd",
                children: "addvcds",
                checkStrictly: true,
            },
            dialogVisible: false,//空值对话框
            ckdialogVisible: false,//查看对话框
            tableData1: [],//空值对话框的表格数据1
            tableData2: [],//空值对话框的表格数据2
            chakanData1: [],//查看对话框第一个表格数据
            chakanData2: [],//查看对话框第二个表格数据
            kzsldhktitle: '',//空值数量对话框title
            ckdhktitle: '',//查看对话框title
            firstBd: "",
            serchBd: "",
            threeBd: '',
            fourBd: '',
            stm: '',
            etm: '',
        }
    },
    mounted() {
        this.xzqhlist();//获取行政区划
        this.sjtqccqdymc();//获取超采区
        let quarterOfYear = require('dayjs/plugin/quarterOfYear')
        dayjs.extend(quarterOfYear)
        // console.log(quarterOfYear);
        let start = dayjs().add(-1, 'quarter').startOf('quarter').format('MM')
        let middle = Number(start) + 1
        let end = dayjs().add(-1, 'quarter').endOf('quarter').format('MM')
        var end1 = Number(end) + 1;//本季度起始月
        if (end == 12) {
            end1 = 1
        }
        // console.log(end2);
        // console.log(start, middle, end);
        if (start == 10) {
            this.form.quarter = 4
        } else if (start == 1) {
            this.form.quarter = 1
        } else if (start == 4) {
            this.form.quarter = 2
        } else if (start == 7) {
            this.form.quarter = 3
        }
        this.firstBd = start
        this.serchBd = middle
        this.threeBd = end
        this.fourBd = end1
        // console.log(this.firstBd, this.serchBd, this.threeBd, this.fourBd);
        this.getriqi();//获取顶部的时间段js
        this.ccqkztjlist();//获取表格数据
    },
    methods: {
        // 获取顶部的时间段
        getriqi() {
            let nowdays = new Date()
            let year = nowdays.getFullYear()
            let year1
            let month = nowdays.getMonth()
            console.log(month);
            if (month === 0) {
                month = 12
                year = year - 1
                // this.quarter = 3
            }
            if (month == 1 || month == 2) {
                year = year - 1
            }
            if (month < 10) {
                month = '0' + month
            }
            if (this.fourBd == 1) {
                year1 = year + 1
            }
            this.form.yr = year + ''
            this.form.yr1 = year1 + ''
            // console.log(this.form.yr);
            let yDate = new Date(year, month, 0)
            let startDareTime = year + '-' + this.firstBd + '-01'
            let endDateTime = year1 + '-' + this.fourBd + '-01'
            // console.log(startDareTime, endDateTime);
            this.stm = startDareTime
            this.etm = endDateTime
        },
        // 获取行政区划
        async xzqhlist() {
            const addvcd = '220000'
            const res = await xzqhlist(addvcd)
            // console.log(res.data.data);
            this.xzqhdata = res.data.data
        },
        // 获取超采区
        async sjtqccqdymc() {
            const res = await sjtqccqdymc(this.form.addvcd)
            // console.log(res);
            this.ccq = res.data.data
        },
        // 超采区变化
        ccqchange(val) {
            this.form.odcd = val
            console.log(val);
        },
        // 获取表格数据
        async ccqkztjlist() {
            const zbcgkzobj = {
                etm: this.etm,
                odcd: this.form.odcd,
                pageInfo: {
                    pageIndex: this.currentPage,
                    pageSize: this.pagesize
                },
                quarter: this.form.quarter,
                quarter_status: '0',
                stlcc: this.form.addvcd,
                stm: this.stm,
                year: this.form.yr
            }
            const res = await ccqkztjlist(JSON.stringify(zbcgkzobj))
            // console.log(res);
            this.tableData = res.data.data.list
            this.total = res.data.data.total
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
        },
        // 页码的切换
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val
            const zbcgkzobj = {
                etm: this.etm,
                odcd: this.form.odcd,
                pageInfo: {
                    pageIndex: this.currentPage,
                    pageSize: this.pagesize
                },
                quarter: this.form.quarter,
                quarter_status: '0',
                stlcc: this.form.addvcd,
                stm: this.stm,
                year: this.form.yr1
            }
            ccqkztjlist(JSON.stringify(zbcgkzobj)).then(res => {
                // console.log(res);
                this.tableData = res.data.data.list
                this.total = res.data.data.total
            })
        },
        // 表格的隔行颜色改变
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
                return 'statistiss-row'
            } else {
                return ''
            }
        },
        // 下拉框自动关闭,选择后触发事件
        xzqhorgChange(val) {
            this.form.addvcd = val.slice(-1).toString();
            this.$refs.xzqh.dropDownVisible = false;
        },
        // 空值对话框显示
        kzsldhkxs(row) {
            // console.log(row);
            this.dialogVisible = true
            this.kzsldhktitle = row.addvnm
            let kzsldhkarr = [{
                odcd: "",
                count: ''
            }]
            kzsldhkarr.map((item, index, arr) => {
                item.odcd = row.odcd
                item.count = row.count
            })
            this.tableData1 = kzsldhkarr
            // 第二个表格接口数据获取
            const kzsldhkobj = {
                etm: this.etm,
                odcd: row.odcd,
                pageInfo: {
                    pageIndex: 0,
                    pageSize: 0
                },
                quarter: this.form.quarter,
                quarter_status: '0',
                stcd: '',
                stcdArray: [],
                sthn: '',
                stlcc: row.addvcd,
                stm: this.stm,
                stnm: '',
                sttp: '1',
                year: this.form.yr1
            }
            // console.log(kzsldhkobj);
            ccqkztjkzsldhklist(JSON.stringify(kzsldhkobj)).then(res => {
                console.log(res);
                this.tableData2 = res.data.data.list
            })
        },
        // 查看对话框显示
        chakandhk(row) {
            this.ckdialogVisible = true
            this.ckdhktitle = row.addvnm
            let ckdhkarr = [{
                addvnm: '',
                odcd: '',
                percent: ''
            }]
            ckdhkarr.map((item, index, arr) => {
                item.addvnm = row.addvnm
                item.odcd = row.odcd
                item.percent = row.percent
            })
            this.chakanData1 = ckdhkarr
            // 第二个表格接口数据获取
            const kzslckdhkobj = {
                etm: this.etm,
                odcd: row.odcd,
                pageInfo: {
                    pageIndex: this.currentPage,
                    pageSize: this.pagesize
                },
                quarter: this.form.quarter,
                quarter_status: '0',
                stlcc: row.addvcd,
                stm: this.stm,
                year: this.form.yr1
            }
            // console.log(kzslckdhkobj);
            ccqkztjckdhklist(JSON.stringify(kzslckdhkobj)).then(res => {
                // console.log(res);
                this.chakanData2 = res.data.data.list
            })
        },
        // 查询
        chaxun() {
            const zbcgkzobj = {
                etm: this.etm,
                odcd: this.form.odcd,
                pageInfo: {
                    pageIndex: this.currentPage,
                    pageSize: this.pagesize
                },
                quarter: this.form.quarter,
                quarter_status: '0',
                stlcc: this.form.addvcd,
                stm: this.stm,
                year: this.form.yr
            }
            ccqkztjlist(JSON.stringify(zbcgkzobj)).then(res => {
                // console.log(res);
                this.tableData = res.data.data.list
                this.total = res.data.data.total
            })
        },
        // 重置
        chongzhi() {
            this.form.addvcd = '220000'
            this.form.odcd = ''
            // this.form.tm = ''
            this.currentPage = 1
            this.pagesize = 10
            const zbcgkzobj = {
                etm: this.etm,
                odcd: this.form.odcd,
                pageInfo: {
                    pageIndex: this.currentPage,
                    pageSize: this.pagesize
                },
                quarter: this.form.quarter,
                quarter_status: '0',
                stlcc: this.form.addvcd,
                stm: this.stm,
                year: this.form.yr
            }
            ccqkztjlist(JSON.stringify(zbcgkzobj)).then(res => {
                // console.log(res);
                this.tableData = res.data.data.list
                this.total = res.data.data.total
            })
        },
        // 导出
        daochu() {
            const daochuobj1 = {
                etm: this.etm,
                odcd: this.form.odcd,
                quarter: this.form.quarter,
                quarter_status: '0',
                stlcc: this.form.addvcd,
                stm: this.stm,
                year: this.form.yr1
            }
            // console.log(daochuobj1);
            ccqkztjlistdc(JSON.stringify(daochuobj1)).then(res => {
                // console.log(res);
                exprotFile.getExcel(res.data, "超采区空值及完成量数据统计表");
            })
        },
        // 空值数量对话框导出
        sldhkdc() {
            const ccqsldhkobj = {
                etm: this.etm,
                odcd: '',
                quarter: this.form.quarter,
                quarter_status: '',
                stlcc: '',
                stm: this.stm,
                year: this.form.yr
            }
            ccqkztjsldhkdc(JSON.stringify(ccqsldhkobj)).then(res => {
                // console.log(res);
                exprotFile.getExcel(res.data, "超采区空值及完成量数据统计表");
            })
            // this.dialogVisible = false

        }
    }
}
</script>
<style lang="scss" scoped>
html,
body {
    height: 100%;
}

.kzjwcgzl {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    ::v-deep .kzjwcgzl-top {
        width: 97%;
        height: 10%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        /* border: 1px solid red; */

        .el-form {
            /* width: 75%; */
            height: 100%;
            float: left;

            .el-form-item {
                padding-top: 10px;
                padding-right: 10px;

                .el-form-item__label {
                    background-color: #0055ab;
                    color: #fff;

                    .el-input {
                        width: 100%;

                        .el-input__inner {
                            width: 100%;
                        }
                    }
                }
            }
        }

        .top-button {
            /* width: 25%; */
            height: 100%;
            padding-top: 10px;
            float: right;

            .el-button {
                background-color: #0055ab;
                color: #fff;

                .iconfont {
                    font-size: 14px;
                }
            }
        }
    }

    ::v-deep .kzjwcgzl-middle {
        width: 97%;
        height: 90%;
        margin: 0 auto;
        /* border: 1px solid red; */
        box-sizing: border-box;

        .el-table {
            width: 100%;
            height: 90%;
            background-color: rgb(243, 243, 243);
            padding-top: 10px;

            .el-table__header-wrapper {}

            .el-table__body-wrapper {
                .iconfont {
                    cursor: pointer;
                }
            }
        }

        .bottom {
            width: 100%;
            height: 10%;

            .el-pagination {
                position: absolute;
                bottom: 3%;
                right: 6%;
            }
        }
    }
}

/* 控制top表单的宽度 */
/deep/ .el-input {
    width: 100%;

    .el-input__inner {
        width: 100%;
    }
}

// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 2px; // 纵向滚动条 必写
}

// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}


/* 表格的行高 */
/deep/ .tableBox {
    th {
        padding: 0 !important;
        height: 50px;
        line-height: 50px;
    }

    td {
        padding: 0 !important;
        height: 40px;
        line-height: 40px;
    }
}

// 鼠标经过颜色
/deep/ .el-table__body tr:hover>td {
    background-color: #d9effe !important;
}

/* 列标题的字体颜色 */
/deep/ .el-table th.el-table__cell>.cell {
    color: #000;
}

/* 内容的字体颜色 */
/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
    color: #000;
}

/* 表格隔行改变的颜色 */
/deep/ .el-table__row.statistiss-row {
    background-color: #f2faff;
}

/* 去掉滚动条上方的小方块背景色 */
/deep/ .kzjwcgzl-middle .el-table--border th.el-table__cell.gutter:last-of-type {
    background: rgb(243, 243, 243);
    border: none;
}

/* 查看对话框 */
/deep/ .el-dialog {
    width: 80%;
    height: 72%;
    box-sizing: border-box;

    .el-dialog__header {
        height: 12%;

        /* 查看对话框标题的大小和颜色 */
        .dialog-title {
            .button-right {
                span {
                    font-size: 1.25rem;
                    color: #0055ab;
                }
            }
        }
    }


    .el-dialog__body {
        padding: 0 20px;
        margin-top: 10px;
        height: 73%;
        box-sizing: border-box;

        /* 对话框的滚动条上方的背景色 */
        .el-table thead.is-group th.el-table__cell {
            background-color: #b2dffe;
        }
    }

    /* 查看对话框底部下载按钮 */
    .el-dialog__footer {
        width: 100%;
        height: 15%;
        text-align: center;
        box-sizing: border-box;

        .el-button {
            background-color: #0055ab;
            color: #fff;
        }
    }
}

/deep/ .el-dialog__header {
    padding-bottom: 1.25rem;
    background-color: #eee;
    height: 12%;
    box-sizing: border-box;
}

/deep/ .ccq {
    .el-form-item {
        .el-form-item__label {
            /* color: red !important; */
            width: 70px !important;
            /* text-align: center !important; */
        }
    }
}
</style>